<template>
  <div class="search-wrapper">
    <input
      type="text"
      class="inpBox"
      placeholder="请输入想去的地方, 比如:'广州'"
      v-model="city"
      @keydown.enter="getPosts()"
    />
    <span class="iconfont searchIcon" @click="getPosts()">&#xe627;</span>
    <div class="recseach">
      <h5 class="title">推荐</h5>
      <span @click="allPosts()">全部</span>
      <span
        v-for="(item, index) in ['北京', '上海', '广州', '成都']"
        :key="index"
        @click="clickSearch(item)"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: ""
    };
  },
  watch: {
    "$route.query.city": {
      handler: function() {
        if (this.$route.query.city) {
          this.city = this.$route.query.city;
          this.getPosts();
        }
      },
      immediate: true
    }
  },
  methods: {
    getPosts() {
      this.$emit("searchCity", { city: this.city, search: 1 });
    },
    clickSearch(val) {
      // console.log(val);
      this.city = val;
      this.getPosts();
    },
    allPosts() {
      this.city = "";
      this.getPosts();
    }
  }
};
</script>

<style lang="less" scoped>
@import "@/static/css/iconfont.css";
.inpBox {
  position: relative;
  width: 100%;
  border: orange 2px solid;
  height: 40px;
  box-sizing: border-box;
  outline: none;
  text-indent: 1.5em;
  &:focus {
    border: orange 3px solid;
  }
}
.searchIcon {
  position: absolute;
  top: 6px;
  right: 10px;
  color: orange;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}
.recseach {
  padding: 10px 5px;
  h5 {
    font-weight: normal;
    display: inline-block;
    padding: 5px;
    background-color: #409eff;
    color: #fff;
  }
  span {
    font-size: 13px;
    margin: 0 5px;
    &:hover {
      color: orange;
      cursor: pointer;
    }
  }
}
</style>
